<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性与监听器</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="root">
    姓<input v-model="firstName">
    名<input v-model="lastName">
    <!--方法1：代码多-->
    <!--<div>{{firstName}}{{lastName}}</div>-->
    <!--方法2:计算属性-->
    <div>{{fullName}}</div>
    <!--侦听器，设默认值为0-->
    <div>{{count}}</div>

</div>
<script>
    new Vue({
        el:"#root",
        data:{
            firstName:"",
            lastName:"",
            // 侦听器
            count:0
        },
        //计算属性：计算出新的结果
        computed:{
            fullName:function () {
                return this.firstName+""+this.lastName
            }
        },
        //侦听器，检测某个属性或者数据发生变化
        watch:{
            firstName:function () {
               this.count++
            },
            lastName:function () {
                this.count++
            }
            //上面对fiestName和lastName的操作可直接替换为：
            // fullNmae:function () {
            //     this.count++
            // }

        }



    })
</script>
</body>
</html>